<template>
  <div>
    <!-- 整体 -->
    <div class="card_div">
      <!-- 头像上传 -->
      <div class="Set_left">
        <el-upload
          class="avatar-uploader"
          action="/api/admin/common/upload"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload"
        >
          <img
            v-if="this.$store.state.admin.imgUrl"
            :src="this.$store.state.admin.imgUrl"
            class="avatar"
          />
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </div>
      <!-- 个人设置 -->
      <div class="Set_right">
        <!-- 修改昵称 -->
        <div class="right_div">
          <el-form
            :model="formNickname"
            label-width="auto"
            class="demo-ruleForm"
          >
            <el-form-item label="用户名：" prop="username">
              <el-input
                :disabled="true"
                v-model="this.$store.state.admin.username"
              ></el-input>
            </el-form-item>
            <el-form-item label="新昵称：" prop="nickname">
              <el-input v-model="formNickname.nickname"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="success" plain @click="submitFormNickname()"
                >保存</el-button
              >
            </el-form-item>
          </el-form>
        </div>
        <!-- 修改密码 -->
        <div class="right_div">
          <el-form
            :model="formPassword"
            label-width="auto"
            class="demo-ruleForm"
          >
            <el-form-item label="旧密码：" prop="passwordOut">
              <el-input
                type="password"
                v-model="formPassword.passwordOut"
                @input="checkChinese(formPassword.passwordOut)"
              ></el-input>
            </el-form-item>
            <el-form-item label="新密码：" prop="password">
              <el-input
                type="password"
                v-model="formPassword.password"
                @input="checkChinese(formPassword.password)"
              ></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="success" plain @click="submitFormPassword()"
                >保存</el-button
              >
            </el-form-item>
          </el-form>
        </div>
        <div class="right_div">
          <!-- 修改手机号 -->
          <!-- <el-form :model="formAdmin" label-width="auto" class="demo-ruleForm">
            <el-form-item label="手机号：" prop="phone">
              <el-input :disabled="true" v-model="formAdmin.phone"></el-input>
            </el-form-item>
            <el-form-item label="验证码：" prop="code">
              <el-input v-model="formAdmin.code"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="submitForm()">保存</el-button>
            </el-form-item>
          </el-form> -->
          <h1>敬请期待！</h1>
        </div>
        <div class="right_div">
          <h1>敬请期待！</h1>
        </div>
      </div>
    </div>
  </div>
</template>
<style scoped>
@import url(../../css/settingsView.css);
</style>
<script src="../../js/Settings.js"></script>
